<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>装箱喷码</title>
		<link rel="stylesheet" href="css/AllStyle.css" />
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript" src="js/data.js"></script>
		<script type="text/javascript" src="js/tmpl.js"></script>
		<script type="text/javascript" src="js/ch.js"></script>
		<script type="text/javascript" src="js/template.js"></script>
	</head>
	<body>
		<!-- 页头 -->
		<section>
			<script type="text/javascript">
				AllPageHeader()
			</script>
		</section>

		<!-- 页面  -->
		<section class="AllContent">
			<div class="ScanBlock" style="padding-bottom: 60px;">
				<form>
					<div class="FormStyle">
						<ul>
							<li style="width: 25%;color: #000000; font-weight: 500;">垛号 :</li>
							<li style="width: 25%;">
								<input type="text" name="" placeholder="垛号" id="" value="B001" />
							</li>
							<li style="width: 25%; color: #000000; font-weight: 500;">工单号 ：</li>
							<li style="width: 25%;">
								<input type="text" name="" placeholder="工单号" id="" value="MO19061001" />
							</li>
							<li style="width: 25%; color: #000000; font-weight: 500;">计划单号 ：</li>
							<li style="width: 25%;">
								<input type="text" name="" placeholder="计划单号" id="" value="JH09061001" />
							</li>
							<li style="width: 25%; color: #000000; font-weight: 500;">订单号 ：</li>
							<li style="width: 25%;">
								<input type="text" name="" placeholder="订单号" id="" value="SO19061001" />
							</li>
							<li style="width: 25%; color: #000000; font-weight: 500;">客户代号 ：</li>
							<li style="width: 25%;">
								<input type="text" name="" placeholder="客户代号" id="" value="CS001" />
							</li>
							<li style="width: 25%; color: #000000; font-weight: 500;">产品代号 ：</li>
							<li style="width: 25%;">
								<input type="text" name="" placeholder="产品代号" id="" value="CP009" />
							</li>
							<li style="color: #000000; font-weight: 500;">每垛台数 ：</li>
							<li>
								<input type="text" name="" class="bg-focus form-control" placeholder="每垛台数" id="" value="50" />
							</li>
							<li style="color: #000000; font-weight: 500;">当前台数 ：</li>
							<li>
								<input class="bg-focus form-control" style="font-size: 30px; color: red;" type="text" name="" placeholder="当前台数"
								 id="size" value="0" />
							</li>

						</ul>
						<div class="ScanInput" style="width:90%;margin:10px auto;">
							<p class="relative">
								<img class="scanimg" data-val="2" src="images/scan_01.png">
								<input id="item_no" class="bg-focus form-control" type="text" name="item_no" placeholder="SN码" value="">
							</p>
							<p><button type="button" style="font-size:0.9em" onclick="proccessTextArea();">扫描SN码</button></p>
						</div>

						<!-- <button class="NextButton" type="button" onclick="submitlot();">完成</button> -->
						<p class="TheResults" style="margin:0px 5%;padding:0px;padding-bottom:10px;"></p>
					</div>

					<div class="grid-body" id="cententbody"></div>

				</form>


			</div>
		</section>

		<section>
			<div class="MaskLayer">
				<div class="MaskContent">
					<p><img src="images/loading5.gif"></p>
					<p>数据获取中...</p>
				</div>
			</div>
		</section>



		<section class="eject">
			<div class="shadeBack"></div>
			<div class="shadConten">
				<p><input type="text" id="query" onchange="queryBranch()" placeholder="输入查询的网点名称"></p>
				<section class="sc_block">

				</section>
			</div>
		</section>
	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/mui.min.js"></script>
	<script type="text/javascript">
		mui.init();
		var _id = "",
			_st = true,
			state = true;
		$('.AllHeader li:eq(1)').text('装箱喷码');
		$('.AllHeader li:eq(2)').html('<img style="width:28px" src="images/Scan.png">')

		mui.plusReady(function() {
			//扫描器
			document.getElementById('Scanner').addEventListener('tap', function() {
				mui.openWindow({
					url: 'Scanner.html?etk=4',
					id: 'Scanner.html'
				});
			});
		});

		//添加refresh自定义事件监听
		window.addEventListener('package', function() {
			var id = event.detail.id;
			$('#item_no').val(id);
			proccessTextArea();
		});

		$(function() {
			//语言包渲染
			Template_ini('centent', '#cententbody');

			//document.addEventListener('deviceready', onDeviceReady, true);
			$("#homepagemessageid").hide();
			$("#homepagemessageid").html("");
			$("#item_no").focus();
		});

		$('.FormStyle').on("click", ".android_select", function() {
			_id = $(this).attr("id");
			$('.eject').show(0);

			//弹出框左右上下居中
			var win = $(window).height() / 2;
			var sch = $('.shadConten').css('height');
			var scTop = win - (parseInt(sch.substring(0, sch.length - 2)) / 2);
			$('.shadConten').css({
				top: scTop
			});
			var z_sc = $('.shadConten').css("height").substring(0, sch.length - 2);
			if (z_sc >= win * 2) {
				$('.shadConten').css({
					height: win * 2 - 20,
					top: "10px"
				});
				$('#query').focus();
			}
			state = false;
		})

		$('.shadeBack').click(function() {
			$('.eject').hide();
			state = true;
		});

		$('.eject').on("click", ".sc_block p", function() {
			_st = false;
			if (_id == "_from_branch") {
				$('#_from_branch').text($(this).text()).attr({
					value: $(this).attr("value")
				});
				$('.eject').hide();
				state = true;
				setCookie("pack.from_bid", $(this).attr("value"));
				setCookie("pack.from_name", $(this).text());
			} else {
				$('#_to_branch').text($(this).text()).attr({
					value: $(this).attr("value")
				});
				$('.eject').hide();
				state = true;
			}
		})

		//返回或者关闭弹窗
		mui.plusReady(function() {
			mui.back = function() {
				if (state == false) {
					$('.eject').hide();
					state = true;
				} else {
					var current = plus.webview.currentWebview();
					current.close();
				}
			};
		});
		var sh;
		var datalist = new Array();

		function submitlot() {
			var pid = $("#pid").val();
			var lot_no = $("#lot_no").val();
			var is_del = $("#is_del").val();
			var itemCount = $("#itemList").children("ul").length;


			var from_branch = $("#_from_branch").attr("value")
			var from_name = $("#_to_branch").text()
			var to_name = $("#_to_branch").text()
			var to_branch = $("#_to_branch").attr("value")

			if (itemCount < 1) {
				alertMessage(L('package_notice_Deliverycode_need'));
			} else {
				var itemList = "";
				$("#itemList ul").each(function() {
					var tmpItemNo = $(this).children("li").get(0).innerHTML;
					if (itemList === "") {
						itemList = tmpItemNo;
					} else {
						itemList = itemList + "," + tmpItemNo;
					}
				});
			}
			var item_no = itemList;
			if (empty(pid)) {
				alertMessage(L('package_lot_notice_selectP'));
				return;
			}
			if (empty($("#_from_branch").attr("value"))) {
				alertMessage(L('package_lot_notice_select_delivery'));
				return;
			}
			if (empty($("#_to_branch").attr("value"))) {
				alertMessage(L('package_notice_select_Receipt'));
				return;
			}
			if (empty(item_no)) {
				alertMessage(L('package_notice_Deliverycode_need'));
				return false;
			}
			$("#homepagemessageid").show();
			$(".MaskLayer").show();
			var datas = {
				access_token: getToken(),
				item_no: item_no,
				pid: pid,
				from_branch: from_branch,
				to_branch: to_branch,
				lot_no: lot_no,
				is_del: is_del
			};
			$.ajax({
				type: "post",
				url: getServerUrl() + "/Open/Comtag/add_taskPackage",
				dataType: 'json',
				data: datas,
				success: function(json) {
					if (json.result == "1") {
						$('.MaskLayer').hide();
						$("#homepagemessageid").html(L('package_lot_text_upload') + "[" + to_name + "]" + L(
							'package_lot_text_to_platform_Y') + "<br/>");
						alert(L('package_lot_text_upload') + "[" + to_name + "]" + L('package_lot_text_to_platform_Y') + "<br/>");
						$("#itemList ul").html('');
						$('.size').find('i').text("0");
					} else {
						$('.MaskLayer').hide();
						$("#homepagemessageid").html(L('package_lot_text_upload_platform_N') + ":[" + L(json.error_code, json) + "]");
						alert(L('package_lot_text_upload_platform_N') + ":[" + L(json.error_code, json) + "]");
						$("#itemList ul").html('');
					}
				}
			});


		}

		$('.MaskLayer').on('click', function() {
			$(this).hide();
		});



		function onDeviceReady() {
			document.addEventListener("backbutton", onBackKeyDown, false);
		}

		function onBackKeyDown() {
			openUrl("index.html");
		}

		function czhi() {
			document.location.reload();
			var oTxt = document.getElementById("item_no");
			oTxt.value = "";
		}
		//处理标签编号
		function proccessTextArea() {
			var itemNo = $("#item_no").val();
			
			//$("#packageNo").val(itemNo);
			addItem(guid());

			var _size = $('#itemList ul').size();
			$('#size').val(_size);
		}

		function addItem(itemNo) {
			var isExit = false;
			$("#itemList ul").each(function() {
				var tmpItemNo = $(this).children("li").get(0).innerHTML;
				if (tmpItemNo === itemNo) {
					alert("SN码已经存在：[" + itemNo + "]");
					isExit = true;
				}
			});

			if (isExit === false) {
				getPackageItem(itemNo);
			}
			$("#item_no").val();
			$("#item_no").focus();
		}

		function getPackageItem(itemNo) {
			var ul = "<ul><li>" + itemNo + "</li><li onClick='rmItem(this)'><a href='#'>删除</a></li></ul>";
			$("#itemList").append(ul);
			return true;
		}

		function rmItem(k) {
			$(k).parent().remove();
			var _size = $('#itemList ul').size();
			$('#size').val(_size);
		}


	</script>
	<script type="text/html" id="centent">
		<section>
			<div class="dataNav" style="margin-top:0px;background-color: #fff;">
				<ul style="background-color: #fff;border-bottom:1px solid #eee">
					<li style="background-color: #fff;">SN码</li>
					<li style="background-color: #fff;">操作</li>
				</ul>
			</div>
			
			<div id="itemList"></div>
		</section>
	</script>
</html>
